<template>
<div class="map-container">
    <!-- <button class="select-button" @click="showExist()" style="right:225px!important;">显示已划分网格</button> -->
    <button class="clear-button" @click="clearCoordinate()" style="right:115px!important;">清除</button>
    <!-- <button class="continue-button" @click="continueCoordinate()">继续</button> -->
    <button class="save-button" @click="submitGridPoints()">确定</button>
    <!-- <select id="gridLevelSelect" class="top-right-select" style="right:60px!important;top:15px!important;">
        <option value="2">区县级网格</option>
        <option value="3">乡镇街道级网格</option>
        <option value="4">社区级网格</option>
        <option value="5">末级网格</option>
    </select> -->
    <div id="mapDiv" class="mapDiv" style="position:relative!important;height:95%!important;"></div>

    <input id="lng" style="display: none;">
    <input id="lat" style="display: none;">
</div>
</template>
<script>
import {loadScript, loadCss,loadModules} from 'esri-loader';
import website from '@/config/website';
// import $ from 'jquery';
import "@/assets/css/gis/coordinate.css";
let map,wkid=website.Mapwkid

export default {
     name: 'coordinateMap',
     props:['lngv','latv'],
    data() {
      return {
          typename: "GIS_GRID2",
          areaPoints:[],
          lng:this.props.lngv,
          lat:this.props.latv
      };
    },

    mounted() {
      let _this = this;

      loadScript({ url: website.InitUrl})
      loadCss(website.CssUrl)
      loadModules([
                "esri/map",
                "esri/layers/ArcGISTiledMapServiceLayer",
                "esri/layers/GraphicsLayer",
                "esri/SpatialReference",
                "esri/geometry/Point",
                "dojo/domReady!"
            ], { css: true })
            .then(([
                Map,
                ArcGISTiledMapServiceLayer,
                GraphicsLayer,
                SpatialReference,
                Point

            ]) => {
                //实例化地图
                map = new Map("mapDiv", {
                center: website.MapCenterPoint,
                zoom: 12,
                slider: false, //缩放按钮移除
                logo: false, //logo移除
                isDoubleClickZoom: false,
                });

                console.log("start:")
                let myTiledMapServiceLayer = new ArcGISTiledMapServiceLayer(website.BaseMapUrl);
                console.log("myTiledMapServiceLayer",myTiledMapServiceLayer)
                map.addLayer(myTiledMapServiceLayer);
                let graphicsLayer = new GraphicsLayer({id:"coordinatePoint"});
                map.addLayer(graphicsLayer);
                graphicsLayer.hide();
                console.log("addlayer:")
                let create_point = new Point(website.MapCenterPoint[0], website.MapCenterPoint[1], new SpatialReference(website.Mapwkid));
                console.log(create_point)
                map.on("load",function(){
                    //setTimeout(function(){
                      map.centerAndZoom(create_point,15);
                      if(_this.lng && _this.lat)
                          _this.showExitPoint();
                      else
                          _this.getCoordinatePoint();
                    //}, 1000);
                });
        })
    },

    methods: {
        //提交数据
        submitGridPoints(){
          console.log("gridpoints:")

          //调用上级组件方法，并返回数据
          this.$emit('getGridData',{'lng':this.lng,'lat':this.lat});
        },

        showExitPoint(){
          loadModules([
              "esri/symbols/PictureMarkerSymbol",
              "esri/graphic",
              "esri/geometry/Point",
              "esri/SpatialReference"
          ], { css: true })
            .then(([PictureMarkerSymbol,Graphic,Point,SpatialReference]) => {
              let _this = this;
              map.graphics.clear();
              //默认wgs84坐标系
              if(!wkid)
                  wkid = website.Mapwkid;
              let point = new Point(parseFloat(this.lng),parseFloat(this.lat),new SpatialReference(wkid));
              let symbol = new PictureMarkerSymbol("/img/point.png",36,36);
              symbol.yoffset = 18;
              let graphic = new Graphic(point,symbol,null,null);
              if(map.getLayer("coordinatePoint"))
                  map.getLayer("coordinatePoint").add(graphic);
              map.centerAt(point);
              _this.getCoordinatePoint();
          })
        },

        /**
         * 清除已打点
         *
         */
        clearCoordinate(){
            if(map.getLayer("coordinatePoint")) {
                map.getLayer("coordinatePoint").clear();
            }
            this.getCoordinatePoint()
        },

        /**
         * 从地图获取点位。
         *
         */
        getCoordinatePoint(){
          loadModules([
              "esri/symbols/PictureMarkerSymbol",
              "esri/graphic"
          ], { css: true })
            .then(([PictureMarkerSymbol,Graphic]) => {
            let _this = this
            map.graphics.clear();
            let point;
            let symbol = new PictureMarkerSymbol('/img/point.png',36,36);
            symbol.yoffset = 18;
            let graphic;
            //click监听保存所选坐标点
            let mapMouseClickEvent = map.on("click",mouseClick);
            //mouseMove监听设置图标跟随鼠标移动
            let mapMouseMoveEvent = map.on("mouse-move",mouseMove);
            //鼠标移入监听设置初次添加graphic
            let mapMouseOverEvent = map.on("mouse-over",mouseOver);
            //鼠标双击直接关闭窗口并保存打点数据
            let mapMouseDoubleClickEvent = map.on("dbl-click",mouseDoubleClick);

            let graphicAdded = false;
            function mouseOver(evt){
                if(!graphicAdded){
                    graphicAdded = true;
                    point = evt.mapPoint;
                    graphic = new Graphic(point,symbol,null,null)
                    map.graphics.add(graphic);
                    mapMouseOverEvent.remove();
                }
            }

            function mouseMove(evt) {
                if(evt.mapPoint)
                {
                    //需要每次清除graphics再重新添加。只改变其geometry在某些条件下会出现莫名其妙的问题。
                    map.graphics.clear();
                    let dynamicGraphic =  new Graphic(evt.mapPoint,symbol,evt.mapPoint.spatialReference);
                    map.graphics.add(dynamicGraphic);
                }
            }

            function mouseClick(evt) {
                if(evt)
                {
                    mapMouseMoveEvent.remove();
                    mapMouseClickEvent.remove();
                    // mapMouseDoubleClickEvent.remove();
                    map.graphics.clear();
                    let newgraphic = new Graphic(evt.mapPoint,symbol,evt.mapPoint.spatialReference);
                    if(map.getLayer("coordinatePoint")){
                        map.getLayer("coordinatePoint").clear();
                        map.getLayer("coordinatePoint").add(newgraphic);
                    }
                    console.log("click:",newgraphic)

                    map.graphics.add(newgraphic);

                    _this.lng = evt.mapPoint.x;
                    _this.lat = evt.mapPoint.y;
                    wkid = evt.mapPoint.spatialReference.wkid;

                    console.log("lng",_this.lng)
                    console.log("lat",_this.lat)
                    // _this.saveCoordinate();
                    //map.getLayer("coordinatePoint").clear();
                }

            }

            function mouseDoubleClick(evt) {
                if(evt)
                {
                    mapMouseMoveEvent.remove();
                    mapMouseClickEvent.remove();
                    mapMouseDoubleClickEvent.remove();
                    map.graphics.clear();
                    let newgraphic = new Graphic(evt.mapPoint,symbol,evt.mapPoint.spatialReference);
                    map.graphics.add(newgraphic);
                    _this.lng = evt.mapPoint.x;
                    _this.lat = evt.mapPoint.y;
                    wkid = evt.mapPoint.spatialReference.wkid;
                    map.getLayer("coordinatePoint").clear();
                    // _this.saveCoordinate();


                }
            }
          })
        },

        beforeDestroy() {
          if (this.view) {
            this.view.container = null
          }
        }
    }
  }
</script>

<style lang="scss" scoped>

</style>
